import { SearchOutlined, SyncOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { Button, Card, Form, Input, Select, Table, Tag } from 'antd'
import { Store } from 'rc-field-form/lib/interface'
import React from 'react'
import '../../DepartmentManage/views/style.css'


export default function EquipmentManageTable() {

    const columns = [{
        title: '设备名称',
        dataIndex: 'devName',
        key: 'devName'
    }, {
        title: "设备状态",
        dataIndex: "devState",
        key: "devState"
    }, {
        title: "设备位置描述",
        dataIndex: "devLocation",
        key: 'devLocation'
    }, {
        title: "设备所属部门",
        dataIndex: "dept",
        key: "dept"
    }, {
        title: "是否打卡设备",
        dataIndex: 'isRecord',
        key: "isRecord"
    }, {
        title: "备注",
        dataIndex: "remark",
        key: "remark"
    }, {
        title: "操作", render: (text: any) =>
            <span><Tag color="#108ee9" icon={<EditOutlined />}>修改</Tag> <Tag color="#f50" icon={<DeleteOutlined />} className='delete'>删除</Tag></span>
    }]

    const [form] = Form.useForm()

    //点击搜索按钮
    function handleFinish(values: Store) {
        // console.log(values)
        //TODO 后续请求数据
    }

    //点击重置按钮
    function handleReset() {
        // console.log(values)
        form.resetFields();
        //TODO 后续请求数据
    }

    //查询框
    const searchForm = (<Card className="search-form"> <Form form={form} layout="inline" initialValues={{ deptState: "1" }} onFinish={handleFinish} onReset={handleReset}>

        <Form.Item className="form-control-item" name="devName" label="设备名称">
            <Input className="search-form-item" />
        </Form.Item>

        <Form.Item className="form-control-item" name="devState" label="设备状态">
            <Select className="search-form-item" >
                <Select.Option value={"1"}>所有</Select.Option>
                <Select.Option value={"2"}>正常</Select.Option>
                <Select.Option value={"3"}>停用</Select.Option>
            </Select>
        </Form.Item>

        {/* <Form.Item className="form-control-item" name="devLocation" label="设备位置">
            <Input className="search-form-item" />
        </Form.Item> */}


        <Form.Item className="form-control-item" >
            <Button type="primary" icon={<SearchOutlined />} htmlType="submit" style={{ marginRight: '8px' }}>搜索</Button>
            <Button icon={<SyncOutlined />} htmlType="reset">重置</Button>

        </Form.Item>

    </Form></Card>)

    const data = [{}]

    return (
        <Card className="search-form-table">
            <Table columns={columns} dataSource={data} />
        </Card>
    )
}
